<template>
  <div class="skin-cart">
    <div class="header">
      <v-row align="center" justify="center" no-gutters>
        <v-col cols="6" md="8" sm="3">
          <div class="title d-flex align-center">
            <img :src="icon"/>
            <h1>{{ title }}</h1>
          </div>
        </v-col>

        <!--        <v-col v-for="i in 3" cols="6" md="1" sm="3"/>-->
        <v-col class="d-flex justify-end" cols="6" md="2" sm="3">
          <router-link class="more" to="/csgo">查看更多>></router-link>
        </v-col>
      </v-row>
    </div>
    <div class="body mt-5">
      <v-row justify="start" justify-md="center" no-gutters>
        <v-col v-for="(item, index) in list" :key="index" class="skin-item pa-1 " cols="6" md="2"
               sm="3">
          <router-link to="/">
            <div style="background-color: #36363c;">
              <div class="py-2 pb-4">
                <div class="img">
                  <img :src="item.img" style="width: 100%;"/>
                </div>
                <p>{{ item.title }}</p>
                <div class="price">
                  <span>{{ item.price }}</span>硬币
                </div>
              </div>
            </div>
          </router-link>
        </v-col>
      </v-row>

    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'SkinCard',
  props: {
    list: {
      type: Array,
      default: [],
      require: true
    },
    title: {
      type: String,
      require: true
    },
    icon: {
      type: String,
      require: true
    },
    dataType: {
      type: String,
      require: true
    }
  },
  setup(props) {
    // console.log(props)
  }
})
</script>
<style lang="scss" scoped>
.skin-cart {
  .header {
    .title {
      img {
        width: 3.4rem;
        margin-right: 0.3rem;
      }

      h1 {
        font-size: 2rem;
      }
    }

    .more {
      cursor: pointer;
      color: #78787b;
      font-size: 1.1rem;
    }
  }

  .body {
    .skin-item {

      div {
        &:hover {
          background-color: #53535a;
        }
      }

      .img {

      }

      p {
        text-align: center;
        width: 100%;
        color: #afafaf;
        margin-bottom: 5px;
      }

      .price {
        cursor: pointer;
        display: inline-block;
        padding: 0.4rem 0.7rem;
        transform: translateX(-50%);
        position: relative;
        left: 50%;
        border-radius: 4px;
        font-size: 1.4rem;
        font-weight: 700;
        color: #fff;
      }
    }
  }
}
</style>
